<template>
  <div>
    <div class="top">
      <p>巡检机器人管理</p>
    </div>

    <div class="selects">

      <el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="150px">
          <el-col :span="8">
            <el-form-item label="场景名称：">
              <el-select v-model="form.sceneName"
                         placeholder="全部">
                <el-option label="全部"
                           value="1"></el-option>
                <el-option label="235测试机器狗"
                           value="2"></el-option>
                <el-option label="2号机器人"
                           value="3"></el-option>
                <el-option label="3号机器人"
                           value="4"></el-option>
                <el-option label="4号机器人"
                           value="5"></el-option>
                <el-option label="5号机器人"
                           value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称：">
              <el-select v-model="form.taskName"
                         placeholder="全部">
                <el-option label="全部"
                           value="01"></el-option>
                <el-option label="SN235"
                           value="02"></el-option>
                <el-option label="0002"
                           value="03"></el-option>
                <el-option label="0003"
                           value="04"></el-option>
                <el-option label="0004"
                           value="05"></el-option>
                <el-option label="0005"
                           value="06"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机器人名称：">
              <el-select v-model="form.robotName"
                         placeholder="全部">
                <el-option label="全部"
                           value="001"></el-option>
                <el-option label="Aliengo"
                           value="002"></el-option>
                <el-option label="0002"
                           value="003"></el-option>
                <el-option label="0003"
                           value="004"></el-option>
                <el-option label="0004"
                           value="005"></el-option>
                <el-option label="0005"
                           value="006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场景编号：">
              <el-select v-model="form.sceneCoding"
                         placeholder="全部">
                <el-option label="全部"
                           value="0001"></el-option>
                <el-option label="235测试机器狗"
                           value="0002"></el-option>
                <el-option label="2号机器人"
                           value="0003"></el-option>
                <el-option label="3号机器人"
                           value="0004"></el-option>
                <el-option label="4号机器人"
                           value="0005"></el-option>
                <el-option label="5号机器人"
                           value="0006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务编号：">
              <el-select v-model="form.taskCoding"
                         placeholder="全部">
                <el-option label="全部"
                           value="00001"></el-option>
                <el-option label="SN235"
                           value="00002"></el-option>
                <el-option label="0002"
                           value="00003"></el-option>
                <el-option label="0003"
                           value="00004"></el-option>
                <el-option label="0004"
                           value="00005"></el-option>
                <el-option label="0005"
                           value="00006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机器人编号：">
              <el-select v-model="form.robotCoding"
                         placeholder="全部">
                <el-option label="全部"
                           value="000001"></el-option>
                <el-option label="Aliengo"
                           value="000002"></el-option>
                <el-option label="0002"
                           value="000003"></el-option>
                <el-option label="0003"
                           value="000004"></el-option>
                <el-option label="0004"
                           value="000005"></el-option>
                <el-option label="0005"
                           value="000006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary"
                       @click="dialogVisible = true"
                       icon="el-icon-plus">新增巡检机器人</el-button>
          </el-col>
          <el-col :span="16"
                  class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-form>
      </el-row>

      <el-row>
        <el-dialog title="新建巡检机器人"
                   :visible.sync="dialogVisible"
                   width="30%">
          <el-form ref="form"
                   :model="form"
                   label-width="163px"
                   :rules="rules">
            <el-col :span="24">
              <el-form-item label="机器人编号：">
                <el-input placeholder="待初始化"
                          :disabled="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机器人名称："
                            prop="name">
                <el-input v-model="form.name"
                          placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机器人型号：">
                <el-input v-model="form.model"
                          placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="心跳检查频次："
                            prop="region">
                <el-select v-model="form.region"
                           placeholder="1分钟/次">
                  <el-option label="1分钟/次"
                             value="1"></el-option>
                  <el-option label="3分钟/次"
                             value="2"></el-option>
                  <el-option label="5分钟/次"
                             value="3"></el-option>
                  <el-option label="10分钟/次"
                             value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电量预警值：">
                <el-input v-model="form.power"
                          placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认电量预警值：20%"
                            label-width="201px">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="温度预警值：">
                <el-input v-model="form.temperature"
                          placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认温度预警值：55℃"
                            label-width="201px">
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="信号：">
                <el-input placeholder="待初始化"
                          :disabled="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="电量：">
                <el-input placeholder="待初始化"
                          :disabled="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="温度：">
                <el-input placeholder="待初始化"
                          :disabled="edit"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>

    </div>

    <el-tabs v-model="activeName"
             type="card"
             @tab-click="handleClick">
      <el-tab-pane label="在线机器人"
                   name="first"></el-tab-pane>
      <el-tab-pane label="离线机器人"
                   name="second"></el-tab-pane>
    </el-tabs>

    <el-row>
      <el-col :span="6"
              v-for="card in 8"
              :key="card">
        <div class="card">
          <div class="bottom-top">
            <div class="bottom-top-left">
              <div class="img"></div>
              <div class="state">
                <span>任务状态：
                  <span v-if="index==0"
                        class="color">执行中</span>
                  <span v-if="index==1"
                        class="color1">——</span>
                </span>
              </div>
            </div>
            <div class="bottom-top-right">
              <i class="el-icon-tickets"
                 @click="details()"></i>
              <i class="el-icon-edit-outline"
                 @click="modify()"></i>
              <i class="el-icon-delete"
                 @click="del()"></i>
            </div>
          </div>
          <div class="bottom-center">
            <p>机器人名称：
              <span>235测试机器狗</span>
            </p>
            <p>机器人类型：
              <span>四足机器人</span>
            </p>
            <p>机器人编号：
              <span>SN235</span>
            </p>
            <p>机器人型号：
              <span>Aliengo</span>
            </p>
          </div>
          <div class="bottom-bottom">
            <div class="item">
              <div class="img img1"></div>
              <p class="span">状态：
                <span v-if="index==0"
                      class="color">在线</span>
                <span v-if="index==1"
                      class="color1">离线</span>
              </p>
            </div>
            <div class="item">
              <div class="img img2"></div>
              <p class="span">信号：
                <span v-if="index==0"
                      class="color">良好</span>
                <span v-if="index==1"
                      class="color1">——</span>
              </p>
            </div>
            <div class="item">
              <div class="img img3"></div>
              <p class="span">电量：
                <span v-if="index==0"
                      style="color: #D9001B;">20%</span>
                <span v-if="index==1"
                      class="color1">——</span>
              </p>
            </div>
            <div class="item">
              <div class="img img4"></div>
              <p class="span">温度：
                <span v-if="index==0"
                      class="color last">24℃</span>
                <span v-if="index==1"
                      class="last color1">——</span>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10,20,30,50,100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="100"
                   background
                   align="center">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      index: 0,
      labelPosition: 'right',
      edit: true,
      dialogVisible: false,
      currentPage: 1,
      form: {
        sceneName: '',
        sceneCoding: '',
        taskName: '',
        taskCoding: '',
        robotName: '',
        robotCoding: '',
        region: '',
        name: '',
        model: '',
        power: '',
        temperature: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入机器人名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入心跳检查频次', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    reset () {
      this.form.sceneName = ''
      this.form.sceneCoding = ''
      this.form.taskName = ''
      this.form.taskCoding = ''
      this.form.robotName = ''
      this.form.robotCoding = ''
    },
    handleClick (tab) {
      this.index = tab.index
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    del () {
      this.$confirm('确认彻底删除此机器人？', '删除巡检机器人', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    modify () {
      this.dialogVisible = true
    },
    details () {
      this.$router.push(
        {
          path: '/robotDetails',
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  padding-bottom: 20px;
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/deep/ .el-row,
.el-tabs {
  padding: 0 20px;
}

/deep/ .el-dialog__footer {
  text-align: center;
}

/deep/ .el-dialog__header {
  text-align: center;
  flex: 1;
  height: 60px;
  line-height: 30px;
  background: #1890ff;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

/deep/ .el-dialog__close {
  color: #ffffff;
}

/deep/ .el-pagination {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
}

.card {
  background: rgba(24, 144, 255, 0.04);
  margin-top: 17px;
  margin-right: 15px;
  padding: 16px 22px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  .bottom-top {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    .bottom-top-left {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .img {
        width: 74px;
        height: 58px;
        background-image: url("../../../assets/robot/robot1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 4px;
      }
      .state {
        margin-left: 16px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #262626;

        .color {
          color: #00b836;
        }
        .color1 {
          color: #7f7f7f;
        }
      }
    }
    .bottom-top-right {
      .el-icon-edit-outline {
        margin: 0 5px;
      }
    }
  }
  .bottom-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #262626;
    margin: 14px 0 6px 0;
    p {
      line-height: 25px;
      width: 50%;
      color: #595959;
      &:nth-child(2n-1) {
        span {
          color: #262626;
        }
      }
    }
  }
  .bottom-bottom {
    display: flex;
    align-items: center;
    .item {
      width: 25%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      &:not(:nth-child(1)) {
        margin-left: 10px;
      }
      .img {
        margin-right: 3px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .img1 {
        background-image: url("../../../assets/robot/state.png");
        width: 12px;
        height: 12px;
      }
      .img2 {
        background-image: url("../../../assets/robot/signal.png");
        width: 12px;
        height: 11px;
      }
      .img3 {
        background-image: url("../../../assets/robot/power.png");
        width: 14px;
        height: 8px;
      }
      .img4 {
        background-image: url("../../../assets/robot/temperature.png");
        width: 5px;
        height: 12px;
      }
      .span {
        .color {
          color: #00b836;
        }
        .color1 {
          color: #7f7f7f;
        }
      }
    }
  }
}
</style>